document.addEventListener('DOMContentLoaded', function () {
    const tableBody = document.getElementById('topic-table-body');
    const refreshStatusEl = document.getElementById('refresh-status');

    // 获取国际化文本的函数
    function getI18nText(key, defaultValue) {
        // 从页面中获取国际化文本，如果获取不到则使用默认值
        const element = document.querySelector(`[data-i18n="${key}"]`);
        return element ? element.textContent : defaultValue;
    }

    const renderTopics = (topics) => {
        tableBody.innerHTML = '';
        if (!topics || topics.length === 0) {
            const noTopicsText = getI18nText('topics.no.topics.found', 'No topics found.');
            tableBody.innerHTML = `<tr><td colspan="4" class="text-center">${noTopicsText}</td></tr>`;
            return;
        }
        topics.forEach(topic => {
            const deleteConfirmText = getI18nText('topics.confirm.delete', 'Are you sure you want to delete this topic? This cannot be undone.');
            const deleteText = getI18nText('common.delete', 'Delete');
            const detailsText = getI18nText('topics.view.details', 'Details');
            
            const row = `
                <tr>
                    <td><a href="/topics/${topic.topicName}">${topic.topicName}</a></td>
                    <td>${topic.partitionCount}</td>
                    <td>${topic.replicationFactor}</td>
                    <td>
                        <form action="/topics/delete" method="post" class="d-inline"
                              onsubmit="return confirm('${deleteConfirmText}');">
                            <input type="hidden" name="topicName" value="${topic.topicName}">
                            <button type="submit" class="btn btn-danger btn-sm py-0 px-2">${deleteText}</button>
                        </form>
                        <a href="/topics/${topic.topicName}" class="btn btn-info btn-sm py-0 px-2 ms-1">${detailsText}</a>
                    </td>
                </tr>
            `;
            tableBody.insertAdjacentHTML('beforeend', row);
        });
    };

    const updateTopicList = async () => {
        try {
            const response = await fetch('/api/topics');
            if (!response.ok) {
                throw new Error(`Network response was not ok: ${response.statusText}`);
            }
            const topics = await response.json();
            renderTopics(topics);
            const liveUpdateText = getI18nText('dashboard.live.update', 'Live Update');
            refreshStatusEl.innerHTML = `<span class="spinner-grow spinner-grow-sm text-success" role="status" aria-hidden="true"></span> ${liveUpdateText}`;
        } catch (error) {
            console.error('Failed to fetch topic data:', error);
            const updateFailedText = getI18nText('topics.update.failed', 'Update Failed');
            refreshStatusEl.innerHTML = `<span class="spinner-grow spinner-grow-sm text-danger" role="status" aria-hidden="true"></span> ${updateFailedText}`;
        }
    };

    setInterval(updateTopicList, 5000);
}); 